<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <!-- <my-navbar
      :background="'#fff'"
      leftText="设置"
      :height="100"
      @leftClick="back"
    ></my-navbar> -->
    <!-- #endif -->
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />
    <view class="content">
      <view
        class="content-box flex-row-start"
        v-for="(item, index) in list"
        :key="index"
        @click="navigaTo(item.path)"
      >
        <image
          class="content-box-img"
          :src="`../../static/images/settings/${item.icon}.svg`"
        ></image>
        <view class="content-box-context flex-column-center">
          <span class="title">{{ item.name }}</span>
          <span class="tips" v-if="item.tips">{{ item.tips }}</span>
        </view>
      </view>
    </view>
    <!-- <view class="content">
      <view
        class="list flex-btw"
        :class="item.line ? 'line' : ''"
        v-for="item in list"
        :key="item.name"
        @click="navigaTo(item.path)"
      >
        <text>{{ item.name }}</text>
        <u-icon name="arrow-right" color="#6D6D6E"></u-icon>
      </view>
    </view> -->
    <view class="button flex-center" @click="logout">退出当前账号</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      config: {
        title: "设置",
        color: "#333333",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
        // rightButton: [
        //   {
        //     key: "btn1",
        //     icon: "&#xe651;",
        //     position: "left",
        //   },
        //   {
        //     key: "btn2",
        //     icon: "&#xe64c;",
        //     position: "left",
        //   },
        //   {
        //     key: "btn3",
        //     icon: "&#xe6eb;",
        //     position: "left",
        //   },
        // ],
      },
      // list: [
      //   { name: "更改密码", path: "/pages/user/change/change_password", tips: '头像、昵称、收货地址等' },
      //   {
      //     name: "更换手机",
      //     path: "/pages/user/change/change_phone",
      //     line: true,
      //   },
      //   // {name:'发票信息',path:'/pages/user/invoice'},
      //   // {name:'意见反馈',path:'/pages/user/feedback'},
      //   { name: "我的资质", path: "/pages/user/qualifications", line: true },
      //   { name: "关于我们", path: "/pages/account/treaty?type=1" },
      //   { name: "服务条款", path: "/pages/account/treaty?type=2" },
      //   { name: "售后规则", path: "/pages/account/treaty?type=3" },
      //   { name: "注册协议", path: "/pages/account/treaty?type=4", line: true },
      // ],
      list: [
        // {
        //   name: "个人信息",
        //   path: "/pages/settings/userInfo",
        //   tips: "头像、昵称、收货地址等",
        //   icon: "grxx",
        // },
        {
          name: "账户与安全",
          path: "/pages/settings/secure",
          line: true,
          tips: "修改密码、修改手机号、账号绑定管理",
          icon: "zhyaq",
        },
        // {name:'发票信息',path:'/pages/user/invoice'},
        // {name:'意见反馈',path:'/pages/user/feedback'},
        {
          name: "我的资质",
          path: "/pages/user/qualifications",
          line: true,
          icon: "zizhi",
        },
        {
          name: "关于我们",
          path: "/pages/account/treaty?type=1",
          icon: "gywm",
        },
        {
          name: "注册协议",
          path: "/pages/account/treaty?type=2",
          icon: "zcxy",
        },
      ],
    };
  },
  onReady() {
    getApp().setTitle();
  },
  methods: {
    find(str, cha, num, replace) {
      var x = str.indexOf(cha);
      for (var i = 0; i < num; i++) {
        x = str.indexOf(cha, x + 1);
      }
      let newstr = str.split("");
      newstr.splice(x, 1, replace);
      newstr = newstr.join("");
      return newstr;
    },
    logout() {
      uni.showModal({
        content: "是否退出登录",
        confirmColor: "#4FA388",
        success: function (res) {
          if (res.confirm) {
            uni.clearStorageSync();
            // #ifdef H5
            window.location.href =
              location.origin + location.pathname + "#/pages/tabar/index";
            // #endif
            // #ifndef H5
            uni.reLaunch({
              url: "/pages/tabar/index",
            });
            // #endif
          }
        },
      });
    },
    navigaTo(path) {
      uni.navigateTo({
        url: path,
      });
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/scss/index.scss";
.page {
  min-height: 100vh;
  background-color: #f6f6f6;

  .content {
    // margin-top: 15rpx;
    width: 100%;
    padding: 0 30rpx;
    &-box {
      width: 100%;
      background: #fff;
      border-radius: 20rpx;
      padding: 45rpx 20rpx;
      align-items: center;
      margin-top: 20rpx;
      &-img {
        width: 80rpx;
        height: 80rpx;
      }
      &-context {
        margin-left: 20rpx;
        height: 80rpx;
        .title {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .tips {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
    }
  }

  .button {
    color: #fff;
    font-size: 28rpx;
    font-family: PingFangSC;
    font-weight: 400;
    width: 710rpx;
    height: 90rpx;
    background: #40ae36;
    box-shadow: 0px 4rpx 13rpx 1px rgba(10, 2, 5, 0.2);
    border-radius: 45rpx;
    position: fixed;
    bottom: 178rpx;
    left: 0;
    right: 0;
    margin: auto;
  }
}

/deep/.hx_font_size {
  font-weight: bold;
}
</style>
